<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title></title>
    <!-- 引入vue.js -->
    <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
</head>
<body>
<div id='app'>
    <input type="button" value="跑起来" @click="start">
    <input type="button" value="停下来" @click="stop">
    <h3>{{msg}}</h3>
</div>

</body>
<script>
    // 实例化vue对象
    let vm = new Vue({
        // 绑定对象
        el:'#app',
        data:{
            msg:'sdsadasdasd这是一条可以动的信息',
            myInterval:null
        },
        methods:{
            start:function(){
                console.log("跑起来")
                // 如果已经定义，则不再向下执行
                if(this.myInterval){
                    return
                }
                // 如果不使用箭头函数需要写let this = this
                // 定义定时器
                this.myInterval = setInterval(()=>{
                    // 获取第一个字符
                    let start = this.msg.substring(0,1)
                    // 获取剩下的字符
                    let end = this.msg.substring(1)
                    // 重新拼凑字符串
                    this.msg = end + start
                },100)
            },
            // Es6写法
            stop(){
                console.log("停下来")
                // 清除定时器
                clearInterval(this.myInterval)
                this.myInterval = null
            }
        }
    })
</script>
</html>